<template>
  <div>
    <el-drawer
      title=""
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="60%"
    >
      
      <mymap></mymap>
      <el-divider></el-divider>
    </el-drawer>
  </div>
</template>

<script>
import mymap from '../components/map.vue'
import campusArea from '../assets/campusArea.json'
import { mapMutations, mapState } from "vuex";
import * as echarts from "echarts";
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "my-drawer",
  data() {
    return {
      // drawer: false,
      direction: "rtl",
    };
  },
  components:{
    mymap:mymap
  },

  watch: {
    drawer(newVal, OldVal) {
      if (newVal == true) {
        this.$nextTick(() => {
          // this.drawerMap();
        });
      }
    },
  },
  methods: {
    ...mapMutations(["drawerFalse"]),

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    drawerMap() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      myChart.showLoading();
 
          let geoJson = campusArea;
          myChart.hideLoading();
          echarts.registerMap("HK", geoJson);
          let option = {
            title: {
              text: "Population Density of Hong Kong （2011）",
              subtext: "Data from Wikipedia",
              sublink:
                "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
            },
            tooltip: {
              trigger: "item",
              formatter: "{b}<br/>{c} (p / km2)",
            },
            toolbox: {
              show: true,
              orient: "vertical",
              left: "right",
              top: "center",
              feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {},
              },
            },
            visualMap: {
              min: 800,
              max: 50000,
              text: ["High", "Low"],
              realtime: false,
              calculable: true,
              inRange: {
                color: ["lightskyblue", "yellow", "orangered"],
              },
            },
            series: [
              {
                name: "香港18区人口密度",
                type: "map",
                map: "HK",
                label: {
                  show: true,
                },
                data: [
                  { name: "泰山区", value: 20057.34 },
                  { name: "启林南", value: 15477.48 },
                  { name: "启林北", value: 31686.1 },
                  { name: "华山区", value: 6992.6 },
           
                ],
                // 自定义名称映射
                nameMap: {
                  "Central and Western": "中西区",
                  Eastern: "东区",
                  Islands: "离岛",
                  "Kowloon City": "九龙城",
                  "Kwai Tsing": "葵青",
                  "Kwun Tong": "观塘",
                  North: "北区",
                  "Sai Kung": "西贡",
                  "Sha Tin": "沙田",
                  "Sham Shui Po": "深水埗",
                  Southern: "南区",
                  "Tai Po": "大埔",
                  "Tsuen Wan": "荃湾",
                  "Tuen Mun": "屯门",
                  "Wan Chai": "湾仔",
                  "Wong Tai Sin": "黄大仙",
                  "Yau Tsim Mong": "油尖旺",
                  "Yuen Long": "元朗",
                },
              },
            ],
          };

          myChart.setOption(option)
      
    },
  },
  computed: {
    ...mapState(["drawer"]),

    drawer: {
      get() {
        return this.$store.state.drawer;
      },

      set(val) {
        this.drawerFalse();
      },
    },
  },

  mounted() {},
};
</script>

<style>
</style>